<template>
  <el-dialog
    :styles="{ top: '120px' }"
    width="1160px"
    :visible.sync="flag"
    :mask-closable="false"
    scrollable
    append-to-body
  >
    <template v-if="flag">
      <goodsDialog
        v-if="goodsFlag"
        ref="goodsDialog"
        :is-decorate="isHomeDecorate"
        :selected-way.sync="goodsData"
      />
      <linkDialog
        v-else
        :link-info="linkInfo"
        class="linkDialog"
        @selectedLink="
          (val) => {
            linkData = val;
          }
        "
      />
    </template>
    <div slot="footer">
      <el-button @click="clickClose">取消</el-button>
      <el-button
        type="primary"
        @click="clickOK"
      >
        确定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import goodsDialog from './goods-dialog';
import linkDialog from './link-dialog';

export default {
  components: {
    goodsDialog,
    linkDialog,
  },
  data() {
    return {
      goodsFlag: false, // 是否商品选择器
      linkInfo: null,
      goodsData: [], //选择的商品
      linkData: '', //选择的链接
      flag: false, // modal显隐,
      isHomeDecorate: false, // 是否移动端首页装饰
    };
  },
  watch: {
    isHomeDecorate: {
      deep: true,
      handler(value) {
        console.log('isHomeDecorate---', value);
      },
    },
  },
  methods: {
    // 关闭弹窗
    clickClose() {
      this.$emit('closeFlag', false);
      this.flag = false;
      this.goodsFlag = false;
    },
    // 单选商品
    singleGoods() {
      var timer = setInterval(() => {
        if (this.$refs.goodsDialog) {
          this.$refs.goodsDialog.type = 'single';
          this.$refs.goodsDialog.isHomeDecorate = true;

          clearInterval(timer);
        }
      }, 100);
    },
    // 点击确认
    clickOK() {
      if (this.goodsFlag) {
        this.$emit('selectedGoodsData', this.goodsData);
        this.goodsData = [];
      } else {
        this.$emit('selectedLink', this.linkData);
      }
      this.clickClose();
    },
    // 打开组件方法
    open(type, mutiple) {
      this.flag = true;
      if (type === 'goods') {
        this.goodsFlag = true;
        if (mutiple) {
          this.singleGoods();
        }
      } else {
        this.goodsFlag = false;
      }
    },
    // 关闭组件
    close() {
      this.flag = false;
    },
  },
};
</script>
<style scoped lang="scss">
// ::v-deep .ivu-modal {
//   overflow: hidden;
//   height: 650px !important;
// }
// ::v-deep .ivu-modal-body {
//   width: 100%;
//   height: 500px;
//   overflow: hidden;
// }
::v-deep .el-scrollbar__wrap {
  .flex-list {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
